<template>
  <el-row class="message-container">
    <el-row>
      <h1 class="message-title">
        {{ $t('trustedComputing.list.componentIntegrityInformation') }}
      </h1>
    </el-row>
    <el-row class="message-body">
      <el-col :span="24">
        <b-table
          ref="table"
          responsive="md"
          selectable
          no-select-on-click
          sort-icon-left
          hover
          no-sort-reset
          sort-by="Id"
          show-empty
          :no-border-collapse="true"
          :items="dataList"
          :fields="fields"
          :sort-desc="true"
          :sort-compare="sortCompare"
          :empty-text="$t('global.table.emptyMessage')"
        >
          <template #cell(Consistence)="row">
            <div
              :style="{
                backgroundColor: row.item.Consistence ? 'green' : 'gray',
                color: 'white',
                display: 'inline-block',
                padding: '5px 10px',
                borderRadius: '15px',
                textAlign: 'center',
                width: '50px',
              }"
            >
              {{
                row.item.Consistence
                  ? $t('trustedComputing.list.yes')
                  : $t('trustedComputing.list.no')
              }}
            </div>
          </template>
          <template #cell(Measurement)="row">
            <span v-if="row.item.Measurement.length > 24">
              {{ row.item.Measurement.substring(0, 24) }}...
            </span>
            <span v-else>
              {{ row.item.Measurement }}
            </span>
          </template>
          <template #cell(MeasurementReference)="row">
            <span v-if="row.item.MeasurementReference.length > 24">
              {{ row.item.MeasurementReference.substring(0, 24) }}...
            </span>
            <span v-else>
              {{ row.item.MeasurementReference }}
            </span>
          </template>
          <template #cell(actions)="row">
            <icon-replace
              :title="$t('trustedComputing.list.updateStrategy')"
              @click="showUpdateWindow(row.item)"
            />
            <icon-trashcan
              :title="$t('trustedComputing.list.deleteStrategy')"
              @click="showDeleteWindow(row.item)"
            />
          </template>
        </b-table>
      </el-col>
    </el-row>
    <!-- Modals -->
    <modal-delete-strategy :url="url" @ok="deleteStrategy" />
    <modal-update-strategy :url="url" :user="user" @ok="updateStrategy" />
  </el-row>
</template>
<script lang="ts">
import { Row, Col } from 'element-ui';
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
import TableSortMixin from '@/components/Mixins/TableSortMixin';
import IconReplace from '@carbon/icons-vue/es/renew/20';
import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
import ModalDeleteStrategy from './ModalDeleteStrategy.vue';
import ModalUpdateStrategy from './ModalUpdateStrategy.vue';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
export default {
  name: 'Message',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    IconReplace,
    IconTrashcan,
    ModalDeleteStrategy,
    ModalUpdateStrategy,
  },
  mixins: [DataFormatterMixin, TableSortMixin, BVToastMixin],
  data() {
    return {
      fields: [
        {
          key: 'Id',
          label: this.$t('trustedComputing.list.id'),
          style: { width: '50px' },
        },
        {
          key: 'Name',
          label: this.$t('trustedComputing.list.name'),
          style: { width: '75px' },
        },
        {
          key: 'ControlModel',
          formatter: (this as any).dataFormatter,
          label: this.$t('trustedComputing.list.ControlModel'),
          style: { width: '75px' },
        },
        {
          key: 'MeasurementHashAlgorithm',
          formatter: (this as any).dataFormatter,
          label: this.$t('trustedComputing.list.hashAlgorithm'),
          style: { width: '75px' },
        },
        {
          key: 'PCR',
          formatter: (this as any).dataFormatter,
          label: this.$t('trustedComputing.list.pcr'),
          style: { width: '75px' },
        },
        {
          key: 'Measurement',
          formatter: (this as any).dataFormatter,
          label: this.$t('trustedComputing.list.measurement'),
        },
        {
          key: 'MeasurementReference',
          formatter: (this as any).dataFormatter,
          label: this.$t('trustedComputing.list.measurementReference'),
        },
        {
          key: 'Consistence',
          formatter: (this as any).dataFormatter,
          label: this.$t('trustedComputing.list.consistence'),
        },
        {
          key: 'actions',
          label: '',
          tdClass: 'text-nowrap',
        },
        {
          key: 'url',
          class: 'd-none',
        },
      ],
      user: null,
      url: '',
    };
  },
  computed: {
    dataList() {
      let list = this.$store.getters['trustedComputing/list'].slice(0);
      list = list.sort((list1: { name: number }, list2: { name: number }) => {
        return list2.name < list1.name ? -1 : 1;
      });
      return list;
    },
  },
  created() {
    this.$store.dispatch('trustedComputing/getTpcmList');
  },
  methods: {
    sortCompare(a: any, b: any, key: string) {
      if (key === 'Id') {
        return this.sortStatus(a, b, key);
      }
    },
    showUpdateWindow(item: any) {
      this.url = item.url;
      this.user = { ...item };
      this.$bvModal.show('modal-update-strategy');
    },
    showDeleteWindow(item: any) {
      this.url = item.url;
      this.$bvModal.show('modal-delete-strategy');
    },
    updateStrategy(
      url: any,
      username: any,
      password: any,
      id: any,
      name: any,
      measurementHashAlgorithm: any,
      measurementReference: any,
      controlModel: any
    ) {
      this.$$store
        .dispatch('trustedComputing/updateStrategy', {
          url,
          username,
          password,
          id,
          name,
          measurementHashAlgorithm,
          measurementReference,
          controlModel,
        })
        .then(() => {
          this.successToast(
            this.$t('trustedComputing.toast.updateStrategySuccess')
          );
          // location.reload();
        })
        .catch(() => {
          this.errorToast(
            this.$t('trustedComputing.toast.updateStrategyError')
          );
        });
    },
    deleteStrategy(url: any, username: any, password: any) {
      this.$$store
        .dispatch('trustedComputing/deleteStrategy', {
          url,
          username,
          password,
        })
        .then(() => {
          this.successToast(
            this.$t('trustedComputing.toast.deleteStrategySuccess')
          );
          // location.reload();
        })
        .catch(() => {
          this.errorToast(
            this.$t('trustedComputing.toast.deleteStrategyError')
          );
        });
    },
  },
};
</script>
<style scoped>
.message-container {
  border-radius: 5px;
  background-color: #fff;
  .el-row {
    padding: 20px 30px 20px;
  }
}
.message-title {
  font-size: 22px;
}
dl > dt {
  font-size: 16px;
  padding-bottom: 20px;
}
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 10px;
  column-gap: 10px;
}
</style>
